<template>
  <div class="slider">
    <fx-card title="基础用法">
      <ul class="list">
        <li>
          <span>基础</span>
          <fx-slider v-model="baseSlider1"/>
        </li>
        <li>
          <span>初始值</span>
          <fx-slider v-model="baseSlider2"/>
        </li>
        <li>
          <span>隐藏提示</span>
          <fx-slider v-model="baseSlider3" :show-tooltip="false"/>
        </li>
        <li>
          <span>提示格式化</span>
          <fx-slider v-model="baseSlider4" :format="format"/>
        </li>
        <li>
          <span>禁用</span>
          <fx-slider v-model="baseSlider5" disabled/>
        </li>
      </ul>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="间断点">
      <ul class="list">
        <li>
          <span>不显示间断点 (间隔10)</span>
          <fx-slider v-model="intermittentSlider1" :step="10"/>
        </li>
        <li>
          <span>显示间断点 (间隔5)</span>
          <fx-slider v-model="intermittentSlider2" :step="5" show-step/>
        </li>
      </ul>
      <template #hide>
        <pre v-highlight="intermittent"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="带输入框">
      <fx-slider v-model="inputSlider" show-input/>
      <template #hide>
        <pre v-highlight="input"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="大小">
      <fx-slider v-model="sizeSlider" size="large"/>
      <fx-slider v-model="sizeSlider" size="middle"/>
      <fx-slider v-model="sizeSlider" size="default"/>
      <fx-slider v-model="sizeSlider" size="mini"/>
      <template #hide>
        <pre v-highlight="size"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="API 属性">
      <fx-table :data="sliderApi">
        <fx-table-item prop="name" label="属性"></fx-table-item>
        <fx-table-item prop="directions" label="说明"></fx-table-item>
        <fx-table-item prop="type" label="类型"></fx-table-item>
        <fx-table-item prop="value" label="可选值"></fx-table-item>
        <fx-table-item prop="default" label="默认"></fx-table-item>
      </fx-table>
    </fx-card>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const sliderApi = [
  { name: 'v-model / modelValue', directions: '绑定值', type: 'Number' },
  { name: 'size', directions: '大小尺寸', type: 'String', value: 'large | middle | default | mini', default: 'default' },
  { name: 'disabled', directions: '禁止', type: 'Boolean', default: false },
  { name: 'showTooltip', directions: '是否显示提示数字', type: 'Boolean', default: false },
  { name: 'showTooltip', directions: '是否显示提示数字', type: 'Boolean', default: true },
  { name: 'format', directions: '格式化数字', type: 'Function', default: null },
  { name: 'step', directions: '步数', type: 'Number', default: 0 },
  { name: 'showStep', directions: '是否显示步数点', type: 'Boolean', default: false },
  { name: 'showInput', directions: '是否显示输入框', type: 'Boolean', default: false },
  { name: 'width', directions: '宽度', type: 'Number | String' }
]

const baseSlider1 = ref<number>(0)
const baseSlider2 = ref<number>(50)
const baseSlider3 = ref<number>(25)
const baseSlider4 = ref<number>(40)
const baseSlider5 = ref<number>(34)
const intermittentSlider1 = ref<number>(10)
const intermittentSlider2 = ref<number>(20)
const inputSlider = ref<number>(20)
const sizeSlider = ref<number>(60)

const base = `<ul class="list">
  <li>
    <span>基础</span>
    <fx-slider v-model="baseSlider1"/>
  </li>
  <li>
    <span>初始值</span>
    <fx-slider v-model="baseSlider2"/>
  </li>
  <li>
    <span>隐藏提示</span>
    <fx-slider v-model="baseSlider3" :show-tooltip="false"/>
  </li>
  <li>
    <span>提示格式化</span>
    <fx-slider v-model="baseSlider4" :format="format"/>
  </li>
  <li>
    <span>禁用</span>
    <fx-slider v-model="baseSlider5" disabled/>
  </li>
</ul>`

const intermittent = `<ul class="list">
  <li>
    <span>不显示间断点 (间隔10)</span>
    <fx-slider v-model="intermittentSlider1" :step="10"/>
  </li>
  <li>
    <span>显示间断点 (间隔5)</span>
    <fx-slider v-model="intermittentSlider2" :step="5" show-step/>
  </li>
</ul>`
const input = '<fx-slider v-model="inputSlider" show-input/>'
const size = `<fx-slider v-model="sizeSlider" size="large"/>
<fx-slider v-model="sizeSlider" size="middle"/>
<fx-slider v-model="sizeSlider" size="default"/>
<fx-slider v-model="sizeSlider" size="mini"/>`

const format = (val: number) => {
  return String(val / 100)
}
</script>

<style scoped lang="scss">
.slider {
  .list {
    > li {
      margin-bottom: 10px;
    }
  }
}
</style>
